<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Style and Configuration ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.font = 'italic 22px "Times New Roman"';

        // --- Parameters ---
        const beamHalfWidth = 3; // Half-width of the beams
        const scale = 22; // Pixels per kilometer

        // --- Coordinates based on the physics problem ---
        // AC=4, BC=6, CD=3 (solved), DE=5
        const C = { x: 140, y: 200 };
        const B = { x: C.x, y: C.y - 6 * scale }; // (140, 68)
        const A = { x: C.x, y: C.y + 4 * scale }; // (140, 288)
        const D = { x: C.x + 3 * scale, y: C.y }; // (206, 200)
        const E = { x: D.x + 5 * scale, y: C.y }; // (316, 200)

        // --- Helper Function to draw beams (double lines) ---
        function drawDoubleLine(p1, p2, halfWidth) {
            const dx = p2.x - p1.x;
            const dy = p2.y - p1.y;
            const length = Math.sqrt(dx * dx + dy * dy);
            if (length === 0) return;

            // Calculate perpendicular offsets
            const offsetX = (dy / length) * halfWidth;
            const offsetY = (-dx / length) * halfWidth;

            // Draw the two parallel lines
            ctx.beginPath();
            ctx.moveTo(p1.x + offsetX, p1.y + offsetY);
            ctx.lineTo(p2.x + offsetX, p2.y + offsetY);
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(p1.x - offsetX, p1.y - offsetY);
            ctx.lineTo(p2.x - offsetX, p2.y - offsetY);
            ctx.stroke();
        }

        // --- Drawing the Structure ---
        // 1. Draw the main continuous beams
        const verticalBeamStart = { x: C.x, y: B.y - 20 };
        const verticalBeamEnd = { x: C.x, y: A.y + 20 };
        drawDoubleLine(verticalBeamStart, verticalBeamEnd, beamHalfWidth);

        const horizontalBeamStart = { x: C.x, y: C.y };
        const horizontalBeamEnd = { x: E.x + 70, y: C.y };
        drawDoubleLine(horizontalBeamStart, horizontalBeamEnd, beamHalfWidth);

        // 2. Draw the diagonal support beams (trusses)
        // These represent the paths AD and BE
        drawDoubleLine(A, D, beamHalfWidth);
        drawDoubleLine(B, E, beamHalfWidth);


        // --- Drawing Markers and Labels ---
        // 3. Draw points
        const pointRadius = 4;
        ctx.beginPath();
        ctx.arc(A.x, A.y, pointRadius, 0, 2 * Math.PI);
        ctx.arc(B.x, B.y, pointRadius, 0, 2 * Math.PI);
        ctx.arc(C.x, C.y, pointRadius, 0, 2 * Math.PI);
        ctx.arc(D.x, D.y, pointRadius, 0, 2 * Math.PI);
        ctx.arc(E.x, E.y, pointRadius, 0, 2 * Math.PI);
        ctx.fill();

        // 4. Draw labels
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText('A', A.x - 15, A.y);
        ctx.fillText('B', B.x - 15, B.y);
        ctx.fillText('C', C.x - 15, C.y + 5);

        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('D', D.x, D.y - 12);
        ctx.fillText('E', E.x, E.y - 12);

        // 5. Draw right-angle markers
        const markerSize = 9;
        ctx.lineWidth = 1;
        ctx.strokeRect(C.x + beamHalfWidth + 1, C.y - markerSize - beamHalfWidth - 1, markerSize, markerSize);
        ctx.strokeRect(C.x + beamHalfWidth + 1, C.y + beamHalfWidth + 1, markerSize, markerSize);

    </script>
</body>
</html>